<template>
    <div class="list-content">
        <div class="list-header clearfix">
            <div class="list-header-tit fl">在线留言</div>
            <div class="list-close fr" style="font-size: 16px;background:#ffffff;">
            <span @click="backHome">返回首页：</span>
                <img src="../../assets/image/backhome.png" style="width:24px;height:24px;" @click="backHome">
                &nbsp;
            <span @click="outmything">在线留言：</span>
            <img src="../../assets/image/jump_to.png" style="width:22px;height:22px;" @click="outmything">
                <!--
                <i @click="backHome" class="list-close el-icon-circle-close"></i>
                -->
            </div>
        </div>
         <div class="btn-wrap">
          <div v-for="item in tabList" @click="changeTab(item)" :key="item.id" :class="{'act-btn':curTab == item.id}"  class="tab-btn">
              {{ item.name }} 
          </div>
          <!--
          {{statusCount[0]}} -{{statusCount[1]}} -{{statusCount[2]}}-{{statusCount[3]}}-{{statusCount[4]}}
          -->
        </div>
        <div class="list-table">
            <div class="home-table">
                <table class="app-table">
                    <thead>
                        <th>标题</th>
                        <th>日期</th>
                        <th>状态</th>
                        <th>操作</th>
                    </thead>
                    <tbody v-if="list.length">
                    <tr v-for="item in list" :key="item.cguid">
                        <td style="width:50%" >{{ item.rqsttitle | filterWords(24) }}</td>
                        <td>{{ item.answertime }}</td>
                        <td>{{ item.status }}</td>
                        <td class="clearfix">
                            <div class="can-btn fl" @click="toSurveyResult(item)">详情</div>
                        </td>
                    </tr>
                    </tbody>
                    <tbody v-if="!list.length">
                    <tr>
                        <td>暂无数据</td>
                        <td>暂无数据</td>
                        <td>暂无数据</td>
                        <td>暂无数据</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="page-wrap">
            <el-pagination
                    background
                    :current-page="pageIndex"
                    :page-size="pageSize"
                    @current-change="pageChange"
                    layout="prev, pager, next,jumper"
                    :total="Number(total)">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {getMailList, getUserInfo} from '@/api'

    export default {
        data() {
            return {
                list: [],
                pageIndex: 1,
                pageSize: 10,
                total: 0,
                curTab:'1',
                tabList:[
                    { name:'咨询',id:1,surveyStatus:10},
                    { name:'建议',id:2,surveyStatus:15},
                    { name:'投诉',id:3,surveyStatus:20}
                ],
                surveyStatus:10,
            };
        },
        computed: {
            getUser() {
                return this.$store.state.user;
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            changeTab(item){
                this.curTab = item.id;
                this.surveyStatus = item.surveyStatus;
                this.getList();
                },

            backHome() {
                this.$router.push({name: 'home'});
            },
            pageChange(num) {
                this.pageIndex = num;
                this.getList();
            },

            outmything(){
               
                let url = 'http://www.sc.gov.cn/10462/xxrkcs/xxts.shtml';
                window.open(url,"_blank")
            },

            getData() { // 保证有userid
                if (this.getUser.id) {
                    this.getList();
                } else {
                    let url = '/sys/sysMember/getMember';
                    getUserInfo(url).then(res => {
                        if (res.data.code == 200) {
                            this.$store.commit('setUserinfo', {
                                id:res.data.data.id,
                                name:res.data.data.realName,
                                mobile:res.data.data.mobile,
                                idNo:res.data.data.idNo,
                                userType:res.data.data.userType
                            })
                            this.getList();
                        }
                    })
                }
            },
            getList() {
                let url = '/sys/sysMember/getmyrqstanswerbycardnum';
                let params = {
                    userName: this.getUser.name,
                    mobile: this.getUser.mobile,
                    rqstType: this.surveyStatus,
                    cardNum: this.getUser.idNo
                }
                getMailList(url, params).then(res => {
                    if (res.data.Status == 'true') {
                        this.list = res.data.data || [];
                        this.total = res.data.custom.allcount || 0;
                    } else {
                        this.list = [];
                        this.total = 0;
                    }
                })
            },
            toSurveyDet(item) {
                // let url = window.location.protocol+ '//'+window.location.host +'/account-center/a/sys/sysMember/toSolicitationDetail?urls=/h5/hd_zxdc_details_pc.html&id='
                // let url = 'http://www.xinjiang.gov.cn/account-center/a/sys/sysMember/toSolicitationDetail?urls=/h5/hd_zxdc_details_pc.html&id='
                // url = url + item.id;
                // url = url + '&memberId=' + this.getUser.id;
                // window.open(url, "_blank")

                if (process.env.NODE_ENV === "production") {
                    window.open("/usercenter/surveySubmit?id=" + item.id, "_blank")
                } else {
                    window.open("/surveySubmit?id=" + item.id, "_blank")
                }
            },
            toSurveyResult(item) {
                // let url = url = window.location.protocol+ '//'+window.location.host +'/account-center/a/sys/sysMember/toSolicitationDetail?urls=/h5/hd_zxdc_result_pc.html&id='
                // let url = url = 'http://www.xinjiang.gov.cn/account-center/a/sys/sysMember/toSolicitationDetail?urls=/h5/hd_zxdc_result_pc.html&id='
                // url = url + item.id;
                // url = url + '&memberId=' + this.getUser.id;
                // window.open(url, "_blank")

                if (process.env.NODE_ENV === "production") {
                    window.open("/usercenter/surveyResult?id=" + item.cguid+"&curTab="+this.curTab, "_blank")
                } else {
                    window.open("/surveyResult?id=" + item.cguid+"&curTab="+this.curTab, "_blank")
                }

            },

        }
    };
</script>

<style lang="scss" scoped>

</style>
